@extends('back.common.layout')
@section('title', '添加分类')

@section('content')
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <button type="submit" form="form-brand" data-toggle="tooltip" title="保存" class="btn btn-primary"><i
                            class="fa fa-save"></i>
                    </button>
                    <a href="{{route('category.list')}}" data-toggle="tooltip" title="取消" class="btn btn-default"> <i
                            class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>商品分类</h1>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="{{route('category.list')}}">商品分类</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-pencil"></i>
                        设置商品分类
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- __ACTION__ -->
                    <form action="{{route('category.set')}}" method="post" enctype="multipart/form-data"
                          id="form-category" class="form-horizontal">
                        {{ csrf_field() }}
                        @if (isset($category['id']))
                            <input type="hidden" name="id" id="input-category_id" value="{{$category['id']}}">
                        @endif
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#tab-general" data-toggle="tab">基本信息</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-general">
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-title">分类标题</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="title"
                                               value="{{isset($category) ? $category->title : ''}}" placeholder="标题32个字符以内"
                                               id="input-title" class="form-control" required="required"/>
                                        @if ($errors->has('title'))
                                            <label for="input-title"
                                                   class="text-danger">{{$errors->first('title')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-parent_id">父分类</label>
                                    <div class="col-sm-10">

                                        <select name="parent_id" id="input-parent_id" class="form-control">
                                            <option value="0">顶级分类</option>
                                            @foreach($handleCollection as $cat)
                                                <option value="{{$cat['id']}}" @if(isset($category) && $category->parent_id == $cat['id']) selected @endif>{{str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $cat['level'])}}{{$cat['title']}}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('parent_id'))
                                            <label for="input-parent_id" class="text-danger">{{$errors->first('parent_id')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-sort_number">排序</label>
                                    <div class="col-sm-10">
                                        <input type="number" name="sort_number"
                                               value="{{isset($category) ? $category->sort_number : ''}}" placeholder="请输入数字"
                                               id="input-sort_number" class="form-control" required="required"/>
                                        @if ($errors->has('sort_number'))
                                            <label for="input-sort_number"
                                                   class="text-danger">{{$errors->first('sort_number')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-image">LOGO</label>
                                    <div class="col-sm-2">
                                        @if (isset($category['image']) && !empty($category['image']))
                                            <img src="{{asset(Storage::disk('categoryThumb')->url($category['image']))}}" alt="image" width="50" height="50">
                                            <input type="file" name="image" accept="image/*" id="input-image">
                                        @else
                                            <input type="file" name="image" accept="image/*" id="input-image">
                                        @endif
                                        @if ($errors->has('image'))
                                            <label for="input-image" class="text-danger">{{$errors->first('image')}}</label>
                                        @endif
                                    </div>
                                    <div class="col-sm-8">
                                        <label class="col-sm-0 control-label" style="color: #ff0065;">(尺寸最大1920*1920)</label>
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-is_used">是否使用</label>
                                    <div class="col-sm-10">
                                        <select name="is_used" id="input-is_used" class="form-control">
                                            <option value="0" @if(isset($category) && $category->is_used == 0) selected @endif>不启用</option>
                                            <option value="1" @if(isset($category) && $category->is_used == 1) selected @endif>启用</option>
                                        </select>
                                        @if ($errors->has('is_used'))
                                            <label for="input-is_used"
                                                   class="text-danger">{{$errors->first('is_used')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label" for="input-is_nav">是否导航</label>
                                    <div class="col-sm-10">
                                        <select name="is_nav" id="input-is_nav" class="form-control">
                                            <option value="0" @if(isset($category) && $category->is_nav == 0) selected @endif>不启用</option>
                                            <option value="1" @if(isset($category) && $category->is_nav == 1) selected @endif>启用</option>
                                        </select>
                                        @if ($errors->has('is_nav'))
                                            <label for="input-is_nav"
                                                   class="text-danger">{{$errors->first('is_nav')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-meta_title">搜索标题</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="meta_title"
                                               value="{{isset($category) ? $category->meta_title : ''}}" placeholder="32字符以内"
                                               id="input-meta_title" class="form-control" />
                                        @if ($errors->has('meta_title'))
                                            <label for="input-meta_title"
                                                   class="text-danger">{{$errors->first('meta_title')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-meta_keyword">搜索关键字</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="meta_keyword"
                                               value="{{isset($category) ? $category->meta_keyword : ''}}" placeholder="32个字符以内"
                                               id="input-meta_keyword" class="form-control"/>
                                        @if ($errors->has('meta_keyword'))
                                            <label for="input-meta_keyword"
                                                   class="text-danger">{{$errors->first('meta_keyword')}}</label>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="input-meta_description">搜索描述</label>
                                    <div class="col-sm-10">
                                        <textarea name="meta_description" class="form-control" id="input-meta_description" rows="5" placeholder="最多输入180字符" maxlength="180">{{isset($category) ? $category->meta_description : ''}}</textarea>
                                        @if ($errors->has('meta_description'))
                                            <label for="input-meta_description"
                                                   class="text-danger">{{$errors->first('meta_description')}}</label>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('appendJS')
    <script src="{{asset('/back/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('/back/validate/additional-methods.min.js')}}"></script>
    <script src="{{asset('/back/validate/localization/messages_zh.min.js')}}"></script>

    <script>
		$(function () {
			$('#form-category').validate({
				rules: {
					title: {
						required: true,
						remote: {
							url: '{{route('ajax.validator', ['name' => 'category'])}}',
							data: {
								'id': $('#input-category_id').size() == 1 ? $('#input-category_id').val() : 0,
							}
						},
						maxlength: 32
					},
					parent_id: {
						required: true,
						remote: {
							url: '{{route('ajax.validator', ['name' => 'categoryParent'])}}',
							data: {
								'id': $('#input-category_id').size() == 1 ? $('#input-category_id').val() : 0,
							    'parent_id': $("#input-parent_id:selected").val()
							}
						}
					},
					sort_number: {
						required: true,
						digits:true
					},
					meta_title: {
						maxlength:32

					},
					meta_keyword: {
						maxlength:32
					},
					meta_description: {
						maxlength:180
					}
				},
				messages: {
					title: {
						required: '分类名称不能为空',
						remote: '分类已经存在',
						maxlength: '分类标题最长32个字符'
					},
					parent_id: {
						required: '父级分类不能为空',
						remote: '不能选择当前分类或其后代作为父分类'
                    },
					sort_number: {
						required: '排序不能为空',
						digits: '此字段必须为整数'
					},
					meta_title: {
						maxlength: '搜索标题最长32个字符'
					},
					meta_keyword: {
						maxlength: '搜索关键字最长32个字符'
					},
					meta_description: {
						maxlength: '搜索描述最长180个字符'
					}
				},

				errorClass: 'text-danger',
				// 处理错误元素的位置
				// error, 错误信息元素
//                element, 出现错误的input元素
				errorPlacement: function (error, element) {
					// 自己的行为, 设置has-error类
					element.parents('div.form-group').addClass('has-error');

					// 默认行为
					error.appendTo(element.parent());
				},
				// 元素校验通过触发
				success: function (label, element) {
					// 自己行为, 去掉has-error
					$(element).parents('div.form-group').removeClass('has-error');
					// 默认行为
					label.remove().hide();
				}
			});
		});
    </script>
@endsection